<template>
  <div id="mars3dContainer" class="mars3d-container"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import * as mars3d from 'mars3d'
import 'mars3d-space'

let map

const creditHtml = `©2023 四创电子- <span>审图号：GS (2024) 1924号</span>
-  甲资字11111577 - <a href="https://geovisearth.com/declaration#/user" target="_blank" trace="tos">服务条款</a> `

// 请自行申请的token后替换， 星图官方地址：https://datacloud.geovisearth.com/support/map/summary
const geovisearthToken = 'a56dddf720b90fd413d9795a90ddae83bc5806b951f3ed5f1ec7407a7b91d6c1'

let mapOptions = {
  // basemaps: [{ name: '天地图', type: 'tdt', layer: 'img_d', show: true }],
  // scene: {
  //   center: { lat: 31.86119, lng: 117.283042, alt: 69659, heading: 0, pitch: -45 }
  // }
  scene: {
    center: { lat: 31.675177, lng: 117.323257, alt: 81193, heading: 0, pitch: -79 },
    highDynamicRange: false,
    globe: {
      showGroundAtmosphere: false,
      depthTestAgainstTerrain:false
    }
  },
  // 方式1：在创建地球前的参数中配置
  basemaps: [
    {
      pid: 10,
      name: '星图影像',
      icon: '/img/basemaps/tdt_img.png',
      type: 'group',
      layers: [
        {
          name: '底图',
          type: 'xyz',
          url: 'https://tiles{s}.geovisearth.com/base/v1/img/{z}/{x}/{y}?token=' + geovisearthToken,
          subdomains: '123'
        },
        {
          name: '注记',
          type: 'xyz',
          url: 'https://tiles{s}.geovisearth.com/base/v1/cia/{z}/{x}/{y}?token=' + geovisearthToken,
          subdomains: '123'
        }
      ],
      show: true,
      credit: creditHtml
    },
    {
      pid: 10,
      name: '星图电子',
      icon: '/img/basemaps/tdt_vec.png',
      type: 'xyz',
      url: 'https://tiles{s}.geovisearth.com/base/v1/vec/{z}/{x}/{y}?token=' + geovisearthToken,
      subdomains: '123',
      credit: creditHtml
    }
  ]
}

const eventTarget = new mars3d.BaseClass() // 事件对象，用于抛出事件到面板中

onMounted(() => {
  console.log('开始挂载')
  map = new mars3d.Map('mars3dContainer', mapOptions);
  // startAnimation()
  // addCreditDOM()
})

onUnmounted(() => {
  console.log('结束挂载')
  removeCreditDOM()
  map = null
})

const startAnimation = () => {
  map.flyHome({ duration: 0 })
  console.log('进入动画')
  // 开场动画
  map.openFlyAnimation({
    duration1: 4,
    easingFunction1: Cesium.EasingFunction.QUINTIC_IN_OUT,
    callback: function () {
      // 动画播放完成后回调
      console.log('播放完毕！')
    }
  })
}

const stopAnimation = () => {
  map.camera.cancelFlight()
}

// 叠加的图层
let tileLayer
function addTileLayer() {
  removeTileLayer()

  // 方式2：在创建地球后调用addLayer添加图层(直接new对应type类型的图层类)
  tileLayer = new mars3d.layer.XyzLayer({
    name: '地形晕渲',
    url: 'https://tiles{s}.geovisearth.com/base/v1/ter/{z}/{x}/{y}?token=' + geovisearthToken,
    subdomains: '123',
    maximumLevel: 9
  })
  map.addLayer(tileLayer)
}

function removeTileLayer() {
  if (tileLayer) {
    map.removeLayer(tileLayer, true)
    tileLayer = null
  }
}

// 在下侧状态栏增加一个额外div展示图层版权信息
let creditDOM
function addCreditDOM() {
  const locationBar = map.control.locationBar?.container
  if (locationBar) {
    creditDOM = mars3d.DomUtil.create(
      'div',
      'mars3d-locationbar-content mars3d-locationbar-autohide',
      locationBar
    )
    creditDOM.style['pointer-events'] = 'all'
    creditDOM.style.float = 'left'
    creditDOM.style.marginLeft = '20px'

    creditDOM.innerHTML = map.basemap?.options?.credit || ''

    map.on(mars3d.EventType.changeBasemap, function (event) {
      creditDOM.innerHTML = event.layer?.options?.credit || ''
    })
  }
}
function removeCreditDOM() {
  if (creditDOM) {
    mars3d.DomUtil.remove(creditDOM)
    creditDOM = null
  }
}
</script>

<style scoped>
#mars3dContainer {
  width: 80vw;
  height: 80vh;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>
